<template>
  <div class="user">
    <van-image
      round
      width="10rem"
      height="10rem"
      :src="userList.avatar | filterImage"
    />
    <p>{{ userList.nickName ? userList.nickName : userList.userName }}</p>
    <div class="links">
      <van-cell title="修改个人信息" is-link @click="alertPerson" />
      <van-cell title="修改密码" is-link @click="alertPassword" />
      <van-cell title="我的订单" is-link />
    </div>
    <van-button type="primary" block @click="backUser">退出</van-button>
  </div>
</template>

<script>
import { InfoAPI } from '../service/user';

export default {
  name: 'VueYimutianUser',

  data() {
    return {
      userList: {},
    };
  },
  async created() {
    const res = await InfoAPI();
    console.log(res.data);
    this.userList = res.data.data;
  },
  mounted() {},

  methods: {
    alertPerson() {
      this.$router.replace({
        name: 'WorkspaceJsonAlertUser',
      });
    },
    alertPassword() {
      this.$router.replace({
        name: 'WorkspaceJsonAlertPassword',
      });
    },
    backUser() {
      this.$router.replace('/login');
    },
  },
};
</script>

<style scoped>
.user {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.user .van-image {
  display: block;
  margin-top: 25px;
}
.links {
  width: 100%;
}
.user .van-button {
  margin-top: 25px;
}
</style>
